import React from "react";
import "../css/token.css";
import { TODOKEY, FINISHED, PENDDING, DELETED } from "./config";
class Token extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: JSON.parse(localStorage.getItem(TODOKEY)) || [],//保存原数据
            filterTodo: []//保存筛选出来的数据
        }
    }

    // 创建阶段
    // 组件将要挂载
    componentWillMount() {
        // 更新组件本身的初始化状态
        // 组件挂载筛前选数据
        var tempArray = []
        this.state.todos.forEach(element => {
            if (element.status !== DELETED) {
                tempArray.push(element);
            }
        })
        this.setState({
            filterTodo: tempArray
        })
    }

    render() {
        return (
            <div className="token_container">
                <div className="token_wrap">
                    {/* 渲染 */}
                    <h3>正在进行</h3>
                    {

                        this.state.filterTodo.map((element, index) => {
                            return <div key={index}
                                className="todo_item_container">
                                <div className="token_item_chechbox">
                                    <input checked={element.status === FINISHED}
                                        type="checkbox" onChange={(event) => {
                                            var checked = event.target.checked;
                                            if (checked) {
                                                element.status = FINISHED;
                                            } else {
                                                element.status = PENDDING;
                                            }
                                            //  更新组件状态
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            //  保存数据
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }} />
                                </div>
                                <div className="token_item_container">
                                    {element.content}
                                </div>
                                <div className="token_item_button">
                                    <button onClick={() => {
                                        element.status = DELETED;
                                        var index = this.state.filterTodo.findIndex((subelement) => {
                                            return subelement.content === element.content;
                                        })
                                        if (index !== -1) {
                                            this.state.filterTodo.splice(index, 1)
                                        }
                                        this.setState({
                                            filterTodo: this.state.filterTodo
                                        })
                                        //  保存数据
                                        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                    }}>删除</button>
                                </div>
                            </div>
                        })
                    }
                </div>
                <div className="token_wrap_container">
                    <div>
                        <button onClick={() => {
                            var tempArray = []
                            this.state.todos.forEach(element => {
                                if (element.status !== DELETED) {
                                    tempArray.push(element);
                                }
                            })
                            this.setState({
                                filterTodo: tempArray
                            })
                        }}>全部</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodo = [];
                            this.state.todos.forEach((element => {
                                if (element.status === FINISHED) {
                                    this.state.filterTodo.push(element)
                                }
                            }));
                            this.setState({
                                filterTodo: this.state.filterTodo
                            })
                        }}>已完成</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodo = [];
                            this.state.todos.forEach(element => {
                                if (element.status === PENDDING) {
                                    this.state.filterTodo.push(element);
                                }
                            })
                            this.setState({
                                filterTodo: this.state.filterTodo
                            })
                        }}>正在进行</button>
                    </div>
                    <div>
                        <button onClick={() => {
                            this.state.filterTodo = [];
                            this.state.todos.forEach((element => {
                                if (element.status === DELETED) {
                                    this.state.filterTodo.push(element)
                                }
                            }));
                            this.setState({
                                filterTodo: this.state.filterTodo
                            })
                        }}>已删除</button>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount() {

    }
    // 更新阶段
    componentWillReceiveProps(props) {
        //    接收新的props,更新组件的状态
        this.props = props;
        //    去重
        var index = this.state.todos.findIndex((element) => {
            return element.content === this.props.todo.content;
        })
        if (index !== -1) {
            alert("不能添加重复的token")
            return;
        }
        this.state.todos.push(this.props.todo);
        //   保存
        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
        this.setState({
            todos: this.state.todos
        })
    }
    // 是否允许组件更新
    shouldComponentUpdate() {
        return true;
    }
    componentWillUpdate() {

    }
    componentDidUpdate() {

    }
}

export default Token;